<template>
  <a-modal v-model:open="open"
           :keyboard="false"
           :mask-closable="false"
           width="100%"
           footer=""
           wrap-class-name="full-modal"
           @cancel="handleClose">
    <template #title>
      <div class="flex justify-center fz18" style="border-bottom: 1px solid #eee;padding: 15px;">{{ chuanYuanXinxi.xingMing }} - 船员资料详情</div>
    </template>
    <div class="content-body container">
        <a-row :gutter="16" class="mt20">
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw"><span class="mr6">船员中文姓名：</span><span>{{ chuanYuanXinxi.xingMing }}</span></div>
            <div class="gutter-box fw"><span class="mr6">手机号：</span><span>{{ chuanYuanXinxi.shouJiHao }}</span></div>
            <div class="gutter-box fw"><span class="mr6">船员分组：</span><span>{{ chuanYuanXinxi.fenZu }}</span></div>
            <div class="gutter-box fw"><span class="mr6">籍贯：</span><span>{{ chuanYuanXinxi.jiGuan }}</span></div>
            <div class="gutter-box fw"><span class="mr6">婚姻状况：</span><span>{{ chuanYuanXinxi.hunYin }}</span></div>
            <div class="gutter-box fw"><span class="mr6">毕业院校：</span><span>{{ chuanYuanXinxi.biYeYuanXiao }}</span></div>
            <div class="gutter-box fw"><span class="mr6">英语水平：</span><span>{{ chuanYuanXinxi.yingYuShuiPing }}</span></div>
            <div class="gutter-box fw"><span class="mr6">身高（cm）：</span><span>{{ chuanYuanXinxi.shenGao }}</span></div>
            <div class="gutter-box fw"><span class="mr6">其他电话：</span><span>{{ chuanYuanXinxi.qiTaDianHua }}</span></div>
            <div class="gutter-box fw"><span class="mr6">紧急联系人：</span><span>{{ chuanYuanXinxi.jinJiLianXiRen }}</span></div>
            <div class="gutter-box fw"><span class="mr6">本人银行卡号：</span><span>{{ chuanYuanXinxi.kaHao }}</span></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw"><span class="mr6">船员英文姓名：</span><span>{{ chuanYuanXinxi.yingWenMing }}</span></div>
            <div class="gutter-box fw"><span class="mr6">身份号：</span><span>{{ chuanYuanXinxi.shenFenHao }}</span></div>
            <div class="gutter-box fw"><span class="mr6">证书职位：</span><span>{{ chuanYuanXinxi.zhiWei }}</span></div>
            <div class="gutter-box fw"><span class="mr6">血型：</span><span>{{ chuanYuanXinxi.xueXing }}</span></div>
            <div class="gutter-box fw"><span class="mr6">宗教信仰：</span><span>{{ chuanYuanXinxi.zongJiaoXinYang }}</span></div>
            <div class="gutter-box fw"><span class="mr6">最高学历：</span><span>{{ chuanYuanXinxi.xueLi }}</span></div>
            <div class="gutter-box fw"><span class="mr6">计算机水平：</span><span>{{ chuanYuanXinxi.jiSuanJiShuiPing }}</span></div>
            <div class="gutter-box fw"><span class="mr6">体重（kg）：</span><span>{{ chuanYuanXinxi.tiZhong }}</span></div>
            <div class="gutter-box fw"><span class="mr6">邮箱：</span><span>{{ chuanYuanXinxi.youXiang }}</span></div>
            <div class="gutter-box fw"><span class="mr6">紧急联系人电话：</span><span>{{ chuanYuanXinxi.jinJiDianHua }}</span></div>
            <div class="gutter-box fw"><span class="mr6">开户行：</span><span>{{ chuanYuanXinxi.kaiHuHang }}</span></div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw"><span class="mr6">性别：</span><span>{{ chuanYuanXinxi.xingBie }}</span></div>
            <div class="gutter-box fw"><span class="mr6">出生日期：</span><span>{{ chuanYuanXinxi.chuShengRiQi }}</span></div>
            <div class="gutter-box fw"><span class="mr6">证书等级：</span><span>{{ chuanYuanXinxi.zhengShuDengJi }}</span></div>
            <div class="gutter-box fw"><span class="mr6">民族：</span><span>{{ chuanYuanXinxi.minZu }}</span></div>
            <div class="gutter-box fw"><span class="mr6">船员类型：</span><span>{{ chuanYuanXinxi.leiXing }}</span></div>
            <div class="gutter-box fw"><span class="mr6">专业：</span><span>{{ chuanYuanXinxi.zhuangYe }}</span></div>
            <div class="gutter-box fw"><span class="mr6">其他技能：</span><span>{{ chuanYuanXinxi.qiTaJiNeng }}</span></div>
            <div class="gutter-box fw"><span class="mr6">鞋号：</span><span>{{ chuanYuanXinxi.xieHao }}</span></div>
            <div class="gutter-box fw"><span class="mr6">工作服号：</span><span>{{ chuanYuanXinxi.gongZuoHao }}</span></div>
            <div class="gutter-box fw"><span class="mr6">紧急联系人地址：</span><span>{{ chuanYuanXinxi.jinJiDiZhi }}</span></div>
            <div class="gutter-box fw"><span class="mr6">备注：</span><span>{{ chuanYuanXinxi.beiZhu }}</span></div>
          </a-col>
        </a-row>
    </div>
  </a-modal>
</template>
<script setup>

const open = ref(false)
const currentIndex = ref(1)
const activeKey = ref('1');
const chuanYuanXinxi = ref({})
const handleClose = ()=>{
  open.value = false;
  currentIndex.value = 1
}

const handleOpen = async (id)=>{
  if(!id){
    useMessage().error("用户信息ID不存在!")
    return
  }
  open.value = true;
  const resp = await useGetChuanYuanKuApi(id)
  chuanYuanXinxi.value = resp.data
}

defineExpose({
  handleOpen
})
</script>
<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    border-radius: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    border-radius: 0;
    padding:0px;
  }
  .ant-modal-body {
    flex: 1;
  }
  .content-body{
    padding:20px 24px;
  }

  .gutter-box{margin-bottom: 10px;}
}
</style>
